<template>
  <div id="demo">
    <transition name="fadein">
      <p v-show="isShow">{{hello}}</p>
    </transition>

    <!-- <transition @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <p v-show="isShow">{{hello}}</p>
    </transition> -->

    <qui-btn msg="点击" @parentClickEvent="showAnima"></qui-btn>
    <!-- <button></button> -->
  </div>
</template>

<script>
import quiBtn from "./QuiButton";
export default {
  name: "demo",
  data() {
    return {
      isShow: false,
      hello: "出现"
    };
  },
  components: {
    quiBtn
  },
  methods: {
    showAnima: function() {
      this.isShow = !this.isShow;
      if (this.isShow == true) {
        this.hello = "出现";
      } else {
        this.hello = "消失";
      }
    }
  }
};
</script>

<style scoped>
#demo {
  width: 100px;
}
p {
  /* height: 20px; */
  background-color: #ddd;
  border-radius: 8px;
  border: 1px solid #000;
  padding: 10px;
}
/* 进场动画 */
/* .test{
    background-color: orange;
} */
.fadein-enter {
  background-color: red;
}
.fadein-enter-active {
  transition: all 2s linear;
}
.fadein-enter-to {
  /* background-color: #ddd; */
  background-color: green;
}
/* 离场动画 */
.fadein-leave {
  background-color: yellow;
}
.fadein-leave-active {
  transition: all 2s linear;
}
.fadein-leave-to {
  background-color: blue;
}
</style>